@import "./component/modal.css";

.loading {
    color: #000;
    position: absolute;
    left: -1px;
    right: -1px;
    height: 100vh;
    top: -1px;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    .iconfont {
        font-size: 20px;
        transition: 0.1s;
        transform-origin: 50%;
        animation: rotate 1s linear infinite;
    }
}
/**
    button
 */
.icon-collect {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
    background-color: rgba(255, 178, 61, 0.2);
    color: rgba(255, 178, 61, 1);
    border: 1px solid #FFF;
    &:hover {
        background-color: rgba(255, 178, 61, 1);
        color: #FFF;
    }
    &.is-collect {
        border-color: #FFB23D;
        background-color: #FFF;
        &:hover {
            background-color: rgba(255, 178, 61, 1);
            color: #FFF;
        }
    }
}

.toast {
    padding: 10px;
    position: absolute;
    z-index: 1001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0,0,0,.7);
    color: #fff;
    font-size: 16px;
    border-radius: 4px;
}
.no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .title {
        white-space: nowrap;
        font-weight: 500;
        margin-top: 15px;
        font-size: 14px;
        line-height: 24px;
        color: #606266;
    }
}
.right-aside {
    display: none;
}
.back-aside {
    display: none;
    position: fixed;
    right: 24px;
    bottom: 15%;
    z-index: 2;
}
.mask {
    position: absolute;
    top: 0;
    height: 100vh;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .7);
    z-index: 201;
}
.lock {
    position: absolute;
    display: flex;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255,255,255,.7);
    border-radius: inherit;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    a {
        color: #1191ff;
        &:hover {
            color: #1191ff;
        }
    }
    .title {
        font-size: 14px;
        color: #FFF;
        background-color: rgba(31,45,61,.85);
        padding: 10px;
        border-radius: 4px;
        position: relative;
        &:after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%);
            border-width: 8px 8px 8px 8px;
            border-style: solid;
            border-color: rgba(31,45,61,.85) transparent transparent transparent;
        }
    }
    .iconfont {
        font-size: 18px;
        color: #1191ff;
        margin-top: 15px;
    }
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type="number"]{
    -moz-appearance: textfield;
}
@media only screen and (min-width: 1200px) {
    .right-aside {
        display: block;
        position: fixed;
        right: 16px;
        bottom: 300px;
        li {
            margin-top: 10px;
            position: relative;
        }
        li > div:not(.aside-sns), li > a > div {
            cursor: pointer;
            border-radius: 50%;
            height: 40px;
            width: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .iconfont {
            font-size: 14px;
        }
        .copy-link {
            position: relative;
            background-color: #E7F3FF;
            color: #1890FF;
        }
        .aside-mail {
            color: #FFF;
            background-color: #1890FF;
        }
        .aside-qq {
            color: #FFF;
            background-color: #60b6ff;
        }
        a {
            color: #FFF;
        }
        .aside-top {
            background-color: #909399;
            &:hover {
                background-color: #303133;
            }
        }
        .aside-tw {
            background-color: #E5F6FD;
            color: rgba(3, 169, 244, 1);
        }
        .aside-fb {
            background-color: #ECEFF5;
            color: rgba(68, 96, 160, 1);
        }
        .aside-share {
            color: #FFF;
            background-color: #F56C6C;
        }
        .aside-sns {
            color: #FFF;
            display: none;
            position: absolute;
            bottom: 100%;
            padding-bottom: 10px;
        }
    }
}